<template>
  <view class="textContainer">
    <view class="textTitle spaceBetween">
      <view style="display: flex; align-items: center">
        <view class="titleFlag"></view><text>{{ title }}</text>
      </view>
      <view class="morePos" @click="onClickMoreMessage()"
        ><span class="styleTextMoreJob">更多{{ title }}</span>
        <img class="styleImageMoreJob" :src="arrowRight" />
      </view>
    </view>
    <view class="header" v-if="posMessage.length > 0">
      <view
        class="posMessage"
        v-for="item in posMessage"
        :key="item.articleId"
        @click="onClickJobInfo(item.articleId)"
      >
        <view class="posTitle">
          <img :src="item.personDetail.personPic" />
          <view class="right">
            <view class="right-top">
              {{ item.personDetail.personIname }}
              <image
                class="styleImageSchoolConsultor"
                :src="srcSchoolConsultor"
              ></image>
            </view>
            <view class="right-bottom">
              {{ item.personDetail.personZw }}
              <view class="box"></view>
            </view>
          </view>
        </view>
        <view class="posContent">{{ item.title }}</view>
        <view class="posDesc">{{ item.summary }}</view>
      </view>
    </view>
    <view v-else class="emptyLoading">
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
  </view>
</template>
<script>
import Empty from '@/components/Empty.vue';
import { getLayerDetailsData } from '@/api/modules/career';
export default {
  props: {
    jobName: {
      type: String,
      default: ''
    },
    positionId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '标题'
    },
    layerId: {
      type: String,
      default: null
    }
  },
  components: {
    Empty
  },
  data() {
    return {
      loading: false,
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      arrowRight:
        this.$imgBaseSelf + 'career/positionDictionary/job_detail_more_job.png',
      posMessage: [],
      srcSchoolConsultor: this.$imgBaseSelf + 'career/consultant.png',
      moreLayerId: '',
      moreLayerType: ''
      // srcSchoolConsultor:
      // this.$imgBaseSelf +
      // "career/positionDictionary/job_detail_school_consultor.png",
      /* career/consultant.png */
    };
  },
  mounted() {
    this.getLayerDetail();
  },
  methods: {
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      const params = {
        id: this.positionId,
        layerIds: this.layerId
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.posMessage = res.data[0].children[0].children[0].data;
            this.moreLayerId = res.data[0].children[0].children[0].layerId || 0;
            this.moreLayerType =
              res.data[0].children[0].children[0].showType ==
              'positionInfo/recommendCareerArticle'
                ? 30
                : 40;
          } else {
            console.log('请求失败');
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onClickJobInfo(id) {
      console.log('onClickJobInfo', id);
      var relatedType = 2;

      uni.navigateTo({
        url:
          '/pagesSub/career/careerInfo/articleDetail?id=' +
          id +
          '&relatedType=' +
          relatedType +
          '&layerId=' +
          this.layerId +
          '&positionId=' +
          this.positionId
      });
    },
    onClickMoreMessage() {
      console.log(
        '--------->onClickMoreMessage',
        this.title,
        this.positionId,
        this.jobName
      );
      uni.navigateTo({
        url:
          '/pagesSub/career/moreJobMessage/index?positionId=' +
          this.positionId +
          '&name=' +
          this.jobName +
          '&moreLayerId=' +
          this.moreLayerId +
          '&moreLayerType=' +
          this.moreLayerType +
          '&title=' +
          this.title
      });
    }
  }
};
</script>
<style scoped lang="scss">
.textContainer {
  margin: 24rpx 32rpx 0rpx 32rpx;
  padding: 42rpx 30rpx 44rpx 28rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .spaceBetween {
    justify-content: space-between;
  }
  .textTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }
    .morePos {
      display: flex;
      flex-direction: row;
      align-items: center;

      .styleTextMoreJob {
        color: #999999;
        font-size: 24rpx;
        font-weight: 300;
      }

      .styleImageMoreJob {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .header {
    font-family: PingFang-SC-Heavy, PingFang-SC;

    .posMessage {
      padding-top: 32rpx;
      padding-bottom: 28rpx;

      & ~ .posMessage {
        border-top: 2rpx solid #f5f5f5;
        padding-bottom: 0;
      }

      .posTitle {
        display: flex;
        align-items: center;

        img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }

        .right {
          margin-left: 16rpx;

          .right-top {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 800;
            color: #222222;
            line-height: 36rpx;

            .styleImageSchoolConsultor {
              width: 40rpx;
              height: 40rpx;
              margin-left: 8rpx;
            }
          }

          .right-bottom {
            margin-top: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            line-height: 36rpx;
          }
        }
      }

      .posContent {
        margin-top: 28rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #222222;
        line-height: 48rpx;
        overflow: hidden; //超出文本隐藏
        text-overflow: ellipsis; ///超出部分省略号显示
        display: -webkit-box; //弹性盒模型
        -webkit-box-orient: vertical; //上下垂直
        -webkit-line-clamp: 2; //自定义行数
      }

      .posDesc {
        margin-top: 8rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
        line-height: 42rpx;
        overflow: hidden; //超出文本隐藏
        text-overflow: ellipsis; ///超出部分省略号显示
        display: -webkit-box; //弹性盒模型
        -webkit-box-orient: vertical; //上下垂直
        -webkit-line-clamp: 2; //自定义行数
      }
    }
  }
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
